import { h, ref, onMounted } from 'vue'
import { NSpace, NTooltip, NButton, NIcon, NSpin } from 'naive-ui'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import { TaskInstance, TaskState } from '@/service/modules/task-instances/types'
import { renderTableTime, tasksState } from '@/common/common'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('taskManage.execUser'),
        key: 'username',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('taskManage.state'),
        key: 'state',
        width: 50,
        render: (rowData: TaskInstance) => renderStateCell(rowData.state, t)
      },
      {
        title: t('taskManage.submitTime'),
        key: 'submitTime',
        ...COLUMN_WIDTH_CONFIG['time'],
        render: (rowData: TaskInstance) => renderTableTime(rowData.submitTime)
      },
      {
        title: t('taskManage.startTime'),
        key: 'startTime',
        ...COLUMN_WIDTH_CONFIG['time'],
        render: (rowData: TaskInstance) => renderTableTime(rowData.startTime)
      },
      {
        title: t('taskManage.endTime'),
        key: 'endTime',
        ...COLUMN_WIDTH_CONFIG['time'],
        render: (rowData: TaskInstance) => renderTableTime(rowData.endTime)
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](4),
        render: (rowData: TaskInstance, unused: number) => {
          return h(NSpace, null, {
            default: () => [
              h(
                NButton,
                {
                  size: 'small',
                  style: { margin: '0 2px', padding: '0 2px' },
                  type: 'error',
                  quaternary: true,
                  onClick: () => void onCallback({ rowData }, 'stopTask'),
                  disabled:
                    rowData.state !== 'RUNNING_EXECUTION' &&
                    rowData.state !== 'WAITING_DEPEND' &&
                    rowData.state !== 'DELAY_EXECUTION'
                },
                t('taskManage.stop')
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'viewLog'),
                  quaternary: true,
                  type: 'info',
                  style: { margin: '0 2px', padding: '0 2px' },
                  size: 'small'
                },
                t('taskManage.log')
              ),
              h(
                NButton,
                {
                  onClick: () =>
                    void onCallback({ rowData }, 'viewQueryResult'),
                  quaternary: true,
                  type: 'info',
                  style: { margin: '0 2px', padding: '0 2px' },
                  size: 'small'
                },
                t('taskManage.queryResult')
              )
            ]
          })
        }
      }
    ] as TableColumns
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }
  onMounted(() => {
    createColumns()
  })

  return {
    columnsRef,
    createColumns
  }
}

export function renderStateCell(state: TaskState, t: Function) {
  if (!state) return ''

  const stateOption = tasksState(t)[state]

  const Icon = h(
    NIcon,
    {
      color: stateOption.color,
      class: stateOption.classNames,
      style: {
        display: 'flex'
      },
      size: 20
    },
    () => h(stateOption.icon)
  )
  return h(NTooltip, null, {
    trigger: () => {
      if (!stateOption.isSpin) return Icon
      return h(NSpin, { size: 20 }, { icon: () => Icon })
    },
    default: () => stateOption.desc
  })
}
